<!--
 * @Author: your name
 * @Date: 2021-04-02 14:39:45
 * @LastEditTime: 2021-04-29 00:02:16
 * @LastEditors: Please set LastEditors
 * @Description: 产品列表
 * @FilePath: /medicine-web/src/views/products/components/productsList.vue
-->
<template>
  <div class="products-list-container font-pattern-2">
    <a-row style="height: 100%;">
      <a-col style="height: 100%;" :span="splitVal(productsList.indexOf(item))" v-for="item in productsList" :key="item.typeName">
        <ul style="margin: 0; padding: 0;">
          <li style="font-weight: bold">{{item.typeName}}</li>
          <ul style="height: 100%; margin: 0; padding: 0;" class="products-select-item">
            <li v-for="o in item.typeContent" :key="o.productName" :style="{ 'margin-top': o.isBottom ? '32px' : '6px' }">
              <span class="products-select-item__text">{{o.productName}}</span>
            </li>
          </ul>
        </ul>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  name: 'productsList',
  data () {
    return {
      productsList: [
        { typeName: '产品名称', typeContent: [] },
        { typeName: '病毒名称', typeContent: [] },
        { typeName: '药企名称', typeContent: [] },
        { typeName: '备注', typeContent: [] }
      ]
    }
  },
  methods: {
    splitVal (num) {
      let temp = 0
      switch (num) {
        case 0:
          temp = 4
          break;
        case 1:
          temp = 4
          break;
        case 2:
          temp = 6
          break;
        default:
          temp = 10
          break;
      }
      return temp
    },
    async fetchData () {
      const res = await this.$action('getProductList')
      if (res && res.length > 0) {
        for (const item of res) {
          if (item.name) {
            this.productsList[0].typeContent.push({ productName: item.name })
          }
          if (item.company_name) {
            this.productsList[1].typeContent.push({ productName: item.virus_type })
          }
          if (item.virus_type) {
            this.productsList[2].typeContent.push({ productName: item.company_name })
          }
          if (item.remark) {
            this.productsList[3].typeContent.push({ productName: item.remark })
          }
        }
      }
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>
<style lang="scss" scoped>
.products-list-container {
  width: 100%;
  max-height: 185px;
  overflow: auto;
  border: 1px solid #fff;
  padding: 14px 16px;
  border-radius: 2px;
  .products-select-item {
    .products-select-item__text {
      cursor: pointer;
    }
  }
}
</style>